<template>
	<view class="teacherPage pageBg">
		<view class="search"><search></search></view>
		<view class="list">
			<teacher-header>
				<template #name>
					<view class="dis">
						<uni-icons type="person-filled" size="30" color="#3bba94"></uni-icons>
						<text>讲师展示</text>
					</view>
				</template>
				<template #custom>
					<navigator url="/pages/teacher/allTeacher">More+</navigator>
				</template>
			</teacher-header>
			<view class="teacher">
				<view class="teacherList">
					<teacher-item v-for="(item,index) in teachers" :key="item.id" :item='item'></teacher-item>
					<teacher-item :isMore='true'></teacher-item>
				</view>
			</view>
		</view>
		<view class="recruit">
			<teacher-header>
				<template #name>
					<view class="dis">
						<uni-icons type="gift-filled" size="30" color="#3bba94"></uni-icons>
						<text>讲师权益</text>
					</view>
				</template>
				<template #custom>
					<navigator url="/pages/teacher/recruit">了解更多</navigator>
				</template>
			</teacher-header>
			<view class="content">
				<swiper autoplay interval="2000" circular indicator-dots>
					<swiper-item>
						<view class="box">
							<display-box :title="cards[0][0].title" :detail="cards[0][0].detail">
								<view class="icon iconfont">&#xe600;</view>
							</display-box>
							<display-box :title="cards[0][1].title" :detail="cards[0][1].detail">
								<view class="icon iconfont">&#xe637;</view>
							</display-box>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="box">
							<display-box :title="cards[1][0].title" :detail="cards[1][0].detail">
								<view class="icon iconfont">&#xe604;</view>
							</display-box>
							<display-box :title="cards[1][1].title" :detail="cards[1][0].detail">
								<view class="icon iconfont">&#xe600;</view>
							</display-box>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="box">
							<display-box :title="cards[2][0].title" :detail="cards[2][0].detail">
								<view class="icon iconfont">&#xe61b;</view>
							</display-box>
							<display-box :title="cards[2][1].title" :detail="cards[2][0].detail">
								<view class="icon iconfont">&#xe674;</view>
							</display-box>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="box">
							<display-box :title="cards[3][0].title" :detail="cards[3][0].detail">
								<view class="icon iconfont">&#xe601;</view>
							</display-box>
							<display-box :title="cards[3][1].title" :detail="cards[3][0].detail">
								<view class="icon iconfont">&#xe6eb;</view>
							</display-box>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

	</view>
</template>

<script setup>
import { ref } from 'vue';
import {apiGetTeachers} from '../../apis/teacher.js'
	const cards=[
		[
			{
				unicode:'&#xe68b;',
				title:'技术变现',
				detail:'将技术、知识快速变现且收益可持续'
			},
			{
				unicode:'&#xe637;',
				title:'人脉拓展',
				detail:'与平台众多技术大牛结识，技术交流，拓展人脉'
			}
		],
		[
			{
				unicode:'&#xe604;',
				title:'扩大影响力',
				detail:'打造讲师个人品牌、口碑提升业内知名度'
			},
			{
				unicode:'&#xe600;',
				title:'推广支持服务',
				detail:'课程内容优先推荐到学院、tui_education等网站首页'

			}
		],
		[
			{
				unicode:'&#xe61b;',
				title:'多渠道推广',
				detail:'除了本站外，其他新媒体、EDM、短信、合作媒体等渠道全网推送'
			},
			{
				unicode:'&#xe674;',
				title:'技术峰会',
				detail:'优先推荐成为线下技术峰会讲师'
			}
		],
		[
			{
				unicode:'&#xe601;',
				title:'免费门票',
				detail:'线下技术峰会免费参加，优秀讲师可直接成为会议主讲嘉宾'
			},
			{
				unicode:'&#xe6eb;',
				title:'讲师关怀',
				detail:'节日问候+定制伴手礼，一站式贴心服务'
			}
		]
	]
	const teachers = ref([])
	const pageCurrent = ref(1)
	const pageSize = ref(5)
	const getTeachers = async (pageCurrent,pageSize) => {
		const res = await apiGetTeachers(pageCurrent,pageSize)
		console.log(res)
		teachers.value = res.data.data.records
	}
	getTeachers(pageCurrent.value,pageSize.value)
</script>

<style lang="scss" scoped>
	.teacherPage {
		background: #f6f6f6;
		.list{
			padding-top: 50rpx;
			.dis {
				display: flex;
				align-items: center;

				text {
					color: #3bba94;
				}
			}

			navigator {
				color: #3bba94;
				font-size: 28rpx;
			}

			.teacherList {
				padding: 30rpx 30rpx 30rpx;
				display: grid;
				gap: 15rpx;
				grid-template-columns: repeat(3, 1fr);
			}
		}
		.recruit{
			padding-top: 50rpx;
			.dis {
				display: flex;
				align-items: center;

				text {
					color: #3bba94;
				}
			}

			navigator {
				color: #3bba94;
				font-size: 28rpx;
			}
			.content{
				padding: 30rpx;
				swiper{
					height: 450rpx;
				}
				.box{
					display: flex;
					flex-wrap: wrap;
					gap: 15rpx;
					justify-content: space-between;
					.icon{
						margin-top: 40rpx;
						font-size: 85rpx;
						color: #ffc000;
					}
				}
			}
		}
	}
</style>
